<template>
    <div>
        <div class="wrap">
            <div class="container">
                <div class="step">
                    <router-link to="/holdall"
                        ><span class="active">工具箱</span></router-link
                    >
                    &nbsp;<span>/</span>&nbsp;
					<router-link to="/classic_input"
                        ><span>五行字典</span></router-link
                    >
                </div>
                <div class="top-box box">
                    <el-row>
                        <el-col :xl="3" :lg="3" :md="3" :sm="6" :xs="24">
                            <div class="avatar-box">
                                <img
                                    v-if="nameParams.sex == 1"
                                    src="@/assets/images/classicName/boy.png"
                                    alt=""
                                />
                                <img
                                    v-else-if="nameParams.sex == 0"
                                    src="@/assets/images/classicName/girl.png"
                                    alt=""
                                />
                                <img
                                    v-else
                                    src="@/assets/images/classicName/weizhi.png"
                                    alt=""
                                />
                            </div>
                        </el-col>
                        <el-col
                            :xl="7"
                            :lg="7"
                            :md="7"
                            :sm="9"
                            :xs="24"
                            class="item-box"
                        >
                            <div class="item">
                                <span class="left">
                                    姓氏：
                                </span>
                                <span class="right">
                                    {{ nameParams.firstName }}
                                </span>
                            </div>
                            <div class="item">
                                <span class="left">
                                    出生日期-公历：
                                </span>
                                <span class="right">
                                    {{ nameParams.birthday }}
                                </span>
                            </div>
                            <div class="item">
                                <span class="left">
                                    生辰八字：
                                </span>
                                <span class="right">
                                    {{ nameInfo.bazi }}
                                </span>
                            </div>
                            <div class="item">
                                <span class="left">
                                    八字五行个数：
                                </span>
                                <span class="right" v-if="nameInfo">
                                    金{{ nameInfo.wxCount.jin || 0 }}个&nbsp;
                                    木{{ nameInfo.wxCount.mu || 0 }}个&nbsp;
                                    水{{ nameInfo.wxCount.shui || 0 }}个&nbsp;
                                    火{{ nameInfo.wxCount.huo || 0 }}个&nbsp;
                                    土{{ nameInfo.wxCount.tu || 0 }}个
                                </span>
                            </div>
                        </el-col>

                        <el-col
                            :xl="7"
                            :lg="7"
                            :md="7"
                            :sm="9"
                            :xs="24"
                            class="item-box"
                        >
                            <div class="item">
                                <span class="left">
                                    性别：
                                </span>
                                <span class="right">
                                    {{ computeSex }}
                                </span>
                            </div>
                            <div class="item">
                                <span class="left">
                                    出生日期-农历：
                                </span>
                                <span class="right">
                                    丁酉年 腊月 二十四时
                                </span>
                            </div>
                            <div class="item">
                                <span class="left">
                                    五气成分指数：
                                </span>
                                <span class="right" v-if="nameInfo">
                                    金{{ nameInfo.wqCount.jin }}个&nbsp; 木{{
                                        nameInfo.wqCount.mu
                                    }}个&nbsp; 水{{
                                        nameInfo.wqCount.shui
                                    }}个&nbsp; 火{{
                                        nameInfo.wqCount.huo
                                    }}个&nbsp; 土{{ nameInfo.wqCount.tu }}个
                                </span>
                            </div>
                        </el-col>

                        <el-col
                            :xl="7"
                            :lg="7"
                            :md="7"
                            :sm="9"
                            :xs="24"
                            class="item-box"
                            v-if="nameInfo"
                        >
                            <div class="item">
                                <span class="left">
                                    印墨（金）：
                                </span>
                                <span class="right">
                                    {{ nameInfo.baZiParse.coe.jinCoefficient }}
                                </span>
                                <span
                                    class="persent"
                                    :style="{
                                        width:
                                            nameInfo.baZiParse.coe
                                                .jinCoefficient + 'px'
                                    }"
                                >
                                </span>
                            </div>
                            <div class="item">
                                <span class="left">
                                    食伤（木）：
                                </span>
                                <span class="right">
                                    {{ nameInfo.baZiParse.coe.muCoefficient }}
                                </span>
                                <span
                                    class="persent"
                                    :style="{
                                        width:
                                            nameInfo.baZiParse.coe
                                                .muCoefficient + 'px'
                                    }"
                                >
                                </span>
                            </div>
                            <div class="item">
                                <span class="left">
                                    比劫（水）：
                                </span>
                                <span class="right">
                                    {{ nameInfo.baZiParse.coe.shuiCoefficient }}
                                </span>
                                <span
                                    class="persent"
                                    :style="{
                                        width:
                                            nameInfo.baZiParse.coe
                                                .shuiCoefficient + 'px'
                                    }"
                                >
                                </span>
                            </div>
                            <div class="item">
                                <span class="left">
                                    财墨（火）：
                                </span>
                                <span class="right">
                                    {{ nameInfo.baZiParse.coe.huoCoefficient }}
                                </span>
                                <span
                                    class="persent"
                                    :style="{
                                        width:
                                            nameInfo.baZiParse.coe
                                                .huoCoefficient + 'px'
                                    }"
                                >
                                </span>
                            </div>
                            <div class="item">
                                <span class="left">
                                    官杀（土）：
                                </span>
                                <span class="right">
                                    {{ nameInfo.baZiParse.coe.tuCoefficient }}
                                </span>
                                <span
                                    class="persent"
                                    :style="{
                                        width:
                                            nameInfo.baZiParse.coe
                                                .tuCoefficient + 'px'
                                    }"
                                >
                                </span>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <div class="c-center-box box" v-if="nameInfo">
                    <div class="title">
                        <span class="circle"></span>
                        精准命理调整补救指导
                    </div>
                    <el-row class="item">
                        <el-col
                            :xl="2"
                            :lg="2"
                            :md="3"
                            :sm="4"
                            :xs="24"
                            class="left"
                        >
                            命局分析
                        </el-col>
                        <el-col
                            :xl="22"
                            :lg="22"
                            :md="21"
                            :sm="20"
                            :xs="24"
                            class="right"
                        >
                            <div v-html="nameInfo.baZiParse.mjfx"></div>
                        </el-col>
                    </el-row>
                    <el-row class="item">
                        <el-col
                            :xl="2"
                            :lg="2"
                            :md="3"
                            :sm="4"
                            :xs="24"
                            class="left"
                        >
                            功名富贵
                        </el-col>
                        <el-col
                            :xl="22"
                            :lg="22"
                            :md="21"
                            :sm="20"
                            :xs="24"
                            class="right"
                        >
                            <div v-html="nameInfo.baZiParse.gmfg"></div>
                        </el-col>
                    </el-row>
                    <el-row class="item">
                        <el-col
                            :xl="2"
                            :lg="2"
                            :md="3"
                            :sm="4"
                            :xs="24"
                            class="left"
                        >
                            适合事业
                        </el-col>
                        <el-col
                            :xl="22"
                            :lg="22"
                            :md="21"
                            :sm="20"
                            :xs="24"
                            class="right"
                        >
                            <div v-html="nameInfo.baZiParse.hy"></div>
                        </el-col>
                    </el-row>
                    <el-row class="item">
                        <el-col
                            :xl="2"
                            :lg="2"
                            :md="3"
                            :sm="4"
                            :xs="24"
                            class="left"
                        >
                            人生贵人
                        </el-col>
                        <el-col
                            :xl="22"
                            :lg="22"
                            :md="21"
                            :sm="20"
                            :xs="24"
                            class="right"
                        >
                            <div v-html="nameInfo.baZiParse.gr"></div>
                        </el-col>
                    </el-row>
                    <el-row class="item">
                        <el-col
                            :xl="2"
                            :lg="2"
                            :md="3"
                            :sm="4"
                            :xs="24"
                            class="left"
                        >
                            文昌位
                        </el-col>
                        <el-col
                            :xl="22"
                            :lg="22"
                            :md="21"
                            :sm="20"
                            :xs="24"
                            class="right"
                        >
                            <div v-html="nameInfo.baZiParse.wcw"></div>
                        </el-col>
                    </el-row>
                    <el-row class="item">
                        <el-col
                            :xl="2"
                            :lg="2"
                            :md="3"
                            :sm="4"
                            :xs="24"
                            class="left"
                        >
                            幸运数字
                        </el-col>
                        <el-col
                            :xl="22"
                            :lg="22"
                            :md="21"
                            :sm="20"
                            :xs="24"
                            class="right"
                        >
                            <div v-html="nameInfo.baZiParse.lucknum"></div>
                        </el-col>
                    </el-row>
                    <el-row class="item">
                        <el-col
                            :xl="2"
                            :lg="2"
                            :md="3"
                            :sm="4"
                            :xs="24"
                            class="left"
                        >
                            吉祥方位
                        </el-col>
                        <el-col
                            :xl="22"
                            :lg="22"
                            :md="21"
                            :sm="20"
                            :xs="24"
                            class="right"
                        >
                            <div v-html="nameInfo.baZiParse.location"></div>
                        </el-col>
                    </el-row>
                    <el-row class="item">
                        <el-col
                            :xl="2"
                            :lg="2"
                            :md="3"
                            :sm="4"
                            :xs="24"
                            class="left"
                        >
                            幸运色彩
                        </el-col>
                        <el-col
                            :xl="22"
                            :lg="22"
                            :md="21"
                            :sm="20"
                            :xs="24"
                            class="right"
                        >
                            <div v-html="nameInfo.baZiParse.jxs"></div>
                        </el-col>
                    </el-row>
                </div>
                <div class="c-bottom-box box">
                    <div class="title" id="recom-jump">
                        <span class="circle"></span>
                        精心为您准备的{{ formatRecomTotal }}个美名
                    </div>
                    <el-row>
                        <el-col
                            :xl="6"
                            :lg="6"
                            :md="8"
                            :sm="8"
                            :xs="12"
                            class="item-box"
                            v-for="(item, index) in recomName"
                            :key="index"
                        >
                            <div class="item">
                                <span class="name"
                                    ><span class="xing">{{ item.xing }}</span>{{ item.ming }}</span
                                >
                                <span
                                    class="detail"
                                    @click="
                                        toNameDetail(
                                            item.xing,
                                            item.ming,
                                            item.score
                                        )
                                    "
                                    >查看详情</span
                                >
								
                            </div>
                        </el-col>
                    </el-row>
                    <div class="page-box">
                        <el-pagination
                            background
                            layout="prev, pager, next"
                            :total="recomTotal"
                            :page-size="pageSize"
							:pager-count="5"
                            @current-change="pageChange"
                        >
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import banner from "@/assets/images/classicName/banner2.png"
export default {
    data() {
        return {
            recomName: [], // 推荐的姓名列表
            nameInfo: '', // 分析姓名相关的信息
            pageSize: 100,
            pageIndex: 1,
            recomTotal: 0, // 总共有多少个推荐的姓名
            nameParams: {}, // 姓名的详细信息
        }
    },
    created() {
		console.log('1',this.$route.query)
        this.nameParams = this.$route.query;
        this.getNameInfo();
        this.choicenessName();
    },
    computed: {
        computeSex() {
            if (this.nameParams.sex == 1) return '男';
            else if (this.nameParams.sex == 0) return '女';
            else return '未知';
        },
        // 根据推荐的姓名个数，显示不同的格式如2000+，3000+
        formatRecomTotal() {
            if (this.recomTotal <= 1000) return this.recomTotal;
            return parseInt(this.recomTotal / 1000) * 1000 + '+';
        }
    },
    methods: {
        // 生成随机字符串
        randomString(len) {
            len = len || 32;
            var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
            var maxPos = $chars.length;
            var pwd = '';
            for (let i = 0; i < len; i++) {
                pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
            }
            return pwd;
        },
		// 用于转换数组
		tt(e){
			if(e[0]=="不限定"){
				return["金","木","水","火","土"]
			}else{
				return e
			}
		},
        // 推荐姓名
        choicenessName() {
			let data={
			        pageIndex: this.pageIndex,
			        pageSize: this.pageSize,
			        sex: this.nameParams.sex, // 0-女，1-男
			        xing: this.nameParams.firstName,
			        count: this.nameParams.count,
			        fix: this.nameParams.fix,
					fixLocal: this.nameParams.fixLocal,
					wuxing2:this.tt(this.nameParams.wuxing)
			    }
			if(this.nameParams.count==3){
				data={
					pageIndex: this.pageIndex,
					pageSize: this.pageSize,
					sex: this.nameParams.sex, // 0-女，1-男
					xing: this.nameParams.firstName,
					count: this.nameParams.count,
					fix: this.nameParams.fix,
					fixLocal: this.nameParams.fixLocal,
					wuxing2:this.tt(this.nameParams.wuxing),
					wuxing3:this.tt(this.nameParams.wuxing1)
				}
			}
            this.$ajax
                .post("/util/wuXingDic",data)
                .then(res => {
                    if (res.data.code == 0) {
						// 调到推荐姓名盒子的顶部
						//if(this.pageIndex >= 2) location.href = location.href + "#recom-jump";
                        this.recomName = res.data.data.list;
                        this.recomTotal = res.data.data.total;
                    } else { this.$message.error(res.data.msg) };
                });
        },
        // 姓名相关分析
        getNameInfo() {
            this.$ajax
                .post("/util/takeName", {
                    birthday: this.nameParams.birthday,
                    sex: this.nameParams.sex, // 0-女，1-男
                })
                .then(res => {
                    if (res.data.code == 0) {
                        this.nameInfo = res.data.data;
                    } else { this.$message.error(res.data.msg) };
                });
        },
        // 用户点击推荐姓名的分页
        pageChange(page) {
            this.pageIndex = page;
            this.choicenessName();
        },
        // 查看推荐的姓名详情
        toNameDetail(firstName, lastName, score) {
            let link = this.$router.resolve({                path: '/name_analysis', query: {
                    firstName: firstName,
                    lastName: lastName,
                    score: score
                }            });
            window.open(link.href, '_blank');
        }
    }
}
</script>
 
<style scoped>
    .wrap {
        position: relative;
        background: url(../../assets/images/classicName/banner2.png) top no-repeat;
        font-size: 15px;
        background-color: rgb(241, 242, 249);
        padding-bottom: 1px;
    }

    .step {
        padding: 25px 0;
    }

    .step .active {
        color: #fff;
    }

    .step span {
        color: #ccc;
    }

    .box {
        background: #fff;
        padding: 30px;
        border-radius: 10px;
        margin-bottom: 30px;
    }

    .top-box .avatar-box {
        text-align: center;
        width: 90px;
        overflow: hidden;
        height: 90px;
    }

    .top-box .avatar-box img {
        width: 100%;
    }

    .top-box .item .left {
        color: rgb(131, 131, 131);
    }

    .top-box .item .right {
        color: rgb(61, 93, 234);
    }

    .top-box .item-box .item {
        margin-top: 20px;
        display: flex;
        align-items: center;
    }

    .top-box .item-box .item:first-child {
        margin-top: 0px;
    }

    .top-box .item-box .item .persent {
        height: 6px;
        width: 100px;
        display: inline-block;
        vertical-align: center;
        border-radius: 3px;
        margin-left: 10px;
        background: linear-gradient(left, rgb(98, 146, 225), rgb(240, 240, 240));
    }

@media screen and (max-width:450px) {
	.item-box .item{
		margin-top: 15px!important;
	}
	.page-box{
		margin-left: -18px;
		margin-right: -18px;
	}
	.box{
		padding-left: 10px;
		padding-right: 10px;
	}
	.c-bottom-box .item{
		width: 100%!important;
		padding: 0 20px!important;
	}
	
	.c-bottom-box .item .name {
		display: inline-flex;
		flex-direction: row;
		align-items: center;
		/* width: 60%!important; */
		font-size: 14px!important;
		color: rgb(61, 93, 234);
	}
	
	.c-bottom-box .item .name .xing {
		color: #000;
		display: inline-block;
		margin-right: 5px!important;
	}
	.c-bottom-box .item .name .score{
		background-color: #ff5f5f;
		display: inline-flex;
		width: auto!important;
		height: 15px!important;
		padding: 0 2px!important;
		align-items: center;
		justify-content: center;
		border-radius: 5px;
		color: #FFF;
		font-size: 12px!important;
	}
	.c-bottom-box .item .detail {
		display: inline-block;
		color: rgb(131, 131, 131);
		cursor: pointer;
		font-size: 14px;
		padding-left: 10px!important;
		border-left: 1px solid rgb(131, 131, 131);
		transition: all 0.3s;
	}
}
    .c-center-box .title,
    .c-bottom-box .title {
        color: #000;
        font-size: 18px;
        display: flex;
        font-weight: 600;
        align-items: center;
    }

    .c-center-box .title .circle,
    .c-bottom-box .title .circle {
        display: inline-block;
        border-radius: 50%;
        border: 4px solid rgb(250, 97, 102);
        width: 18px;
        margin-right: 10px;
        height: 18px;
    }

    .c-center-box .item {
        margin-top: 25px;
        line-height: 1.5;
    }

    .c-center-box .item .left {
        color: #000;
		font-weight: bold;
    }

    .c-center-box .item .right {
        color: rgb(46, 46, 46);
    }

    .c-bottom-box .item-box {
        text-align: center;
        margin-top: 20px;
    }

    .c-bottom-box .item {
        width: 212px;
        height: 72px;
        display: flex;
        margin: auto;
        align-items: center;
        padding: 0 30px;
        justify-content: space-between;
        
        background: url(../../assets/images/classicName/name_bg.png) no-repeat;
		background-size: 100% 100%;
    }

    .c-bottom-box .item .name {
        font-size: 17px;
        color: rgb(61, 93, 234);
    }

	.c-bottom-box .item .name .xing {
		color: #000;
		display: inline-block;
		margin-right: 6px;
	}

    .c-bottom-box .item .detail {
        display: inline-block;
        color: rgb(131, 131, 131);
        cursor: pointer;
        font-size: 14px;
        padding-left: 20px;
        border-left: 1px solid rgb(131, 131, 131);
		transition: all 0.3s;
    }

	.c-bottom-box .item .detail:hover {
		color: rgb(61, 93, 234)
	}

    .page-box {
        text-align: center;
        margin-top: 50px;
    }
</style>